<template>
    <div class="order-detial-container">
        <div class="order-detial-info">
            <div class="odi-con">
                <div class="odic-item1">
                     <div  :class="[is_success ? 'odi-txt1' : 'odi-txt1 gray-color']" >{{amount}}</div>
                    <div class="odi-txt2">支付金额</div>
                </div>
                <div class="odic-item2">
                    <div class="od-li-con">
                        <div class="odlc-item1">交易状态</div>
                        <div class="odlc-item2">
                            <div v-if="is_success">交易成功</div>
                            <div v-else>交易失败</div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="od-li-con">
                        <div class="odlc-item1">支付方式</div>
                        <div class="odlc-item2">{{bankname}}</div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="od-li-con">
                        <div class="odlc-item1">交易单号</div>
                        <div class="odlc-item2">{{tradeNo}}</div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="od-li-con">
                        <div class="odlc-item1">支付时间</div>
                        <div class="odlc-item2">{{payTime}}</div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>
<script>
export default {
    data(){
        return{
            is_success:false,
            amount:'',
            tradeNo:'',
            payTime:'',
            bankname:''
        }
    },
    created(){
        let that = this;
        that._load()
    },
    methods:{
        _load(){
            let that = this;
            if(that.$route.query.paymentState=="PAID"){
                that.is_success = true
            }
            that.amount = that.$route.query.amount
            that.tradeNo = that.$route.query.tradeNo
            that.payTime = that.$route.query.payTime
            that.bankname = that.$route.query.bankname
        }
    }
}
</script>
<style lang="less" scoped>
.order-detial-container{
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    font-size: 4vw;
    .order-detial-info{
        width: 100%;
        background-color: #fff;
        padding-bottom: 10%;
        .odi-con{
            width: 94%;
            margin:0 auto;
            .odic-item1{
                border-bottom: 1px solid #f5f5f5;
                text-align: center;
                .odi-txt1{
                    font-size: 8vw;
                    color:#fe6d0a;
                    padding-top: 9%;
                }
                .odi-txt2{
                    padding: 2% 0 10% 0;
                }
            }
            .odic-item2{
                .od-li-con{
                    padding-top: 4%;
                    font-size: 4vw;
                    .odlc-item1{
                        float: left;
                        color:#969696;
                    }
                    .odlc-item2{
                        float: right;
                    }
                }
            }
        }
        .gray-color{
            color:#c8c8c8 !important;
        }
    }
}
</style>
